<!-- 关于我们 -->
<template>
  <div class="aboutUs">
    <header v-if="data.about_back" :style="'background: url('+data.about_back+') no-repeat 50% 50%;'">
      <span>{{ i18n.navigation.About }}</span>
      <p>
        <span>{{ i18n.propagandize.integrity }}</span>
        <span>{{ i18n.propagandize.profession }}</span>
        <span>{{ i18n.propagandize.innovate }}</span>
        <span>{{ i18n.propagandize.winwin }}</span>
      </p>
    </header>
    <div class="introduce">
      <p v-if="width > 768">
        <img :src="require('@/assets/aboutUs/2.png')" />
      </p>
      <div>
        <p>{{ data.about_title }}</p>
        <span>{{ data.about_content }}</span>
      </div>
    </div>
    <p class="headline">{{ i18n.propagandize.propagandize }}<span></span></p>
    <div class="propagandize">
      <span></span>
      <video
        preload="Metadata"
        Controls
        :src="data.about_video"
      ></video>
    </div>
    <p class="headline">{{ i18n.propagandize.culture }}<span></span></p>
    <div class="culture">
      <main>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture1 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture2 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture3 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture4 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture5 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture6 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture7 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture8 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture9 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture10 }}</span>
          </p>
        </div>
        <div>
          <p>
            <i></i>
            <span>{{ i18n.propagandize.culture11 }}</span>
          </p>
        </div>
      </main>
    </div>
    <p class="headline">{{ i18n.propagandize.league }}<span></span></p>
    <div class="league">
      <p v-for="(val,ins) in data.about_franchise" :key="ins">
        <img :src="val" />
      </p>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bus from "@/config/emit";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
        data:{}
    };
  },
  props: ["width"],
  //计算属性 类似于data概念
  computed: {
    i18n() {
      return this.$t("message");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    aboutUs() {
      this.$getRequest("/index/aboutUs").then((res) => {
        this.data=res.data
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.aboutUs();
    bus.$on("lang", () => {
      if (this.$route.name == "/aboutUs") {
        this.aboutUs();
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.aboutUs();
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.aboutUs {
  & > .league {
    width: 17.5rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;

    & > p:nth-child(4n) {
      margin-right: 0%;
    }

    &>p:hover{
      transform: scale(1.1);
      box-shadow: 0px 0px 20px 0px #33333330;
      & > img {
        max-width: 105%;
        max-height: 105%;
        box-shadow: 0px 0px 20px 0px #33333330;
      }
    }

    & > p {
      width: 3.75rem;
      margin-right: 0.82rem;
      height: 1.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      margin-bottom: 0.4375rem;
      transition: all .3s;

      & > img {
        max-width: 95%;
        max-height: 95%;
        transition: all .3s;
      }
    }
  }

  & > .culture {
    width: 17.5rem;
    margin: 0 auto;

    & > main {
      width: 100%;
      font-size: 0.3125rem;
      margin-bottom: 0.875rem;

      & > div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &>p:hover{
          box-shadow: 0px 0px 20px 0px #33333330;
        }

        & > p {
          width: 100%;
          padding: .25rem 0.375rem;
          display: flex;
          align-items: center;
          transition: all .3s;

          & > span {
            flex: 1;
          }

          & > i {
            width: 0.3rem;
            height: 0.3rem;
            background-color: #223ad6;
            margin-right: 0.1875rem;
          }
        }
      }
    }
  }

  & > .propagandize {
    width: 12.8375rem;
    height: 6.875rem;
    margin: 0 auto;
    position: relative;

    & > span {
      width: 2.0875rem;
      height: 2.0875rem;
      background-color: #223ad6;
      position: absolute;
      left: -0.5rem;
      top: -0.5rem;
      z-index: -99;
    }

    & > video {
      width: 100%;
      height: 100%;
    }
  }

  & > .headline {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    font-size: 0.4375rem;
    margin: 1.25rem 0;
    font-weight: bold;

    span {
      width: 1.25rem;
      height: 0.0625rem;
      border-radius: 0.0625rem;
      background: #17278d;
    }
  }

  & > .introduce {
    width: 100%;
    display: flex;
    margin: 1.25rem auto;

    & > div {
      width: 50%;
      padding-top: 1px;

      & > span {
        text-indent: 0.625rem;
        display: block;
        width: 8.75rem;
        font-size: 0.3125rem;
        color: #666666;
      }

      & > p {
        width: 8.75rem;
        text-align: center;
        font-weight: bold;
        font-size: 0.375rem;
        margin: 0.625rem 0;
      }
    }

    & > p {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      background: url("../assets/aboutUs/3.png") no-repeat 50% 50%;
      background-size: 100%;

      & > img {
        width: 7.25rem;
        height: 7.25rem;
        margin-right: 1.25rem;
      }
    }
  }

  & > header {
    width: 100%;
    height: 7.5rem;
    background-size: auto 100% !important;
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    & > span {
      margin: 1.25rem 0;
    }

    & > p {
      height: 0;
      display: flex;

      & > span {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.3125rem;
        color: #17278d;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ffffffb8;
        background-clip: padding-box;
        border: 0.125rem solid #ffffff30;
        margin: 0 0.625rem;
        border-radius: 50%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .aboutUs {
    & > .league {
      width: 33.5rem;
      justify-content: space-between;

      & > p {
        width: 15rem;
        margin-right: 0;
        height: 7.5rem;
        margin-bottom: 2rem;
      }
    }

    & > .culture {
      width: 33.5rem;

      & > main {
        font-size: 1.2rem;
        margin-bottom: 2rem;

        & > div {
          & > p {
            padding: .5rem;

            & > i {
              width: 1rem;
              height: 1rem;
              margin-right: 1rem;
            }
          }
        }
      }
    }

    & > .propagandize {
      width: 31rem;
      height: 18rem;

      & > span {
        width: 5rem;
        height: 5rem;
        background-color: #223ad6;
        position: absolute;
        left: -1.5rem;
        top: -1.5rem;
        z-index: -99;
      }
    }

    & > .headline {
      font-size: 1.8rem;
      margin: 2rem 0 2rem;

      span {
        width: 4rem;
        height: 0.3rem;
        border-radius: 0.3rem;
      }
    }

    & > .introduce {
      margin: 2rem auto;

      & > div {
        width: 100%;
        padding-top: 1px;

        & > span {
          text-indent: 2rem;
          display: block;
          width: 33.5rem;
          margin: 0 auto;
          font-size: 1rem;
        }

        & > p {
          width: 33.5rem;
          text-align: center;
          font-weight: bold;
          font-size: 1.2rem;
          margin: 1rem auto;
        }
      }
    }

    & > header {
      height: 20rem;
      background-size: auto 100% !important;
      font-size: 1.5rem;

      & > span {
        margin: 2rem 0;
      }

      & > p {
        & > span {
          width: 4rem;
          height: 4rem;
          font-size: 1rem;
          border: 0.5rem solid #ffffff30;
          margin: 0 1rem;
        }
      }
    }
  }
}
</style>